/*
 * @Author: yangrongxin
 * @Date: 2021-12-21 16:08:54
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 16:34:49
 */

import { useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import type { NpsChoise } from '@/types/exam.d';
import type { ComProps } from '../index.d';
import styles from './index.module.less';

interface INpsSelect extends ComProps {
  extend: NpsChoise
}

const NpsSelect = (props: INpsSelect) => {
  const {
    extend: {
      leftText = '左侧文字',
      rightText = '右侧文字',
      scope = 5, // 默认启始为1, 提交答案时, 直接提交选中的数值
      beginScore = 1
    },
    answer,
    setAnswer
  } = props;

  const [scopeList, setScopeList] = useState<number[]>([]);

  useEffect(() => {
    const list: number[] = [];
    let j = beginScore;
    for(let i = 0; i < scope; i += 1 ) {
      list.push(j);
      j++;
    }
    setScopeList(list);
  }, [scope, beginScore]);

  const onChangeValue = (value) => {
    if (value === answer[0]) return;
    setAnswer({
      answer: [value],
    }, '');
  };

  return (
    <View className={styles.selectNPContainer}>
      <View className={styles.text}>
        <Text className={styles.leftText}>{leftText}</Text>
        <Text className={styles.rightText}>{rightText}</Text>
      </View>
      <View className={styles.npsList}>
        {scopeList.map(value =>
          <Text
            key={value}
            className={`${styles.npsItem} ${value <= answer[0] ? styles.npsChecked : ''} `}
            onClick={() => onChangeValue(value)}
          >{value}</Text>
        )}
      </View>
    </View>
  )
};

export default NpsSelect;
